<template>
    <div class="main-box">
        <!-- 全局操作板块 -->
        <div class="some-button">
            <el-col :span="2">
                <el-button type="primary" plain @click="loadData()">刷新</el-button>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" plain @click="openAddForm()">新增</el-button>
            </el-col>
        </div>
        <!-- 表格板块 -->
        <div class="table-box">
            <el-table
                    :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                    style="width: 100%"
                    v-loading="loading"
                    :cell-style="cellStyle"
                    :row-style="rowStyle"
                    @row-click="changeCurrentRow"
            >
                                                                                    <!-- 图片位置 -->
                    <el-table-column
                            prop="imagePlace"
                            label="图片位置"
                            align="center"
                    >
                    </el-table-column>
                                                                    <!-- 位置编号 -->
                    <el-table-column
                            prop="placeCode"
                            label="位置编号"
                            align="center"
                    >
                    </el-table-column>
                                                                    <!-- 图片链接 -->
                    <el-table-column
                            prop="imageUrl"
                            label="图片链接"
                            align="center"
                    >
                    </el-table-column>
                                                                    <!-- 创建时间 -->
                    <el-table-column
                            prop="createTime"
                            label="创建时间"
                            align="center"
                    >
                    </el-table-column>
                                                                    <!-- 修改时间 -->
                    <el-table-column
                            prop="updateTime"
                            label="修改时间"
                            align="center"
                    >
                    </el-table-column>
                                                                    <!-- 创建人 -->
                    <el-table-column
                            prop="createAdmin"
                            label="创建人"
                            align="center"
                    >
                    </el-table-column>
                                                                    <!-- 修改人 -->
                    <el-table-column
                            prop="updateAdmin"
                            label="修改人"
                            align="center"
                    >
                    </el-table-column>
                                
                <el-table-column label="操作"  align="center" width="210">
                    <template slot-scope="scope">
                        <el-col :span="12">
                            <div style="border-radius: 5px">
                                <el-button
                                        icon="el-icon-edit"
                                        style="border-radius: 7px"
                                        @click="handleEdit(scope.$index, scope.row)"
                                >编辑</el-button>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div style="border-radius: 5px">
                                <el-button
                                        icon="el-icon-delete"
                                        type="danger"
                                        plain
                                        style="border-radius: 7px"
                                        @click="handleDelete(scope.$index, scope.row)"
                                >删除</el-button>
                            </div>
                        </el-col>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-size="pagesize"
                               :page-sizes="[5,10, 20, 30, 40]"
                               :total="totalnum"
                               layout="total,jumper,prev, pager ,next,sizes"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog :visible.sync="editFormVisible" width="50%">
            <el-form label-width="200px" :model="editForm" ref="editForm">
                <el-row>
                    <el-col :span="18">
                                                                                                        
                            <el-form-item label="图片位置">
                                <el-input size="small" v-model="editForm.imagePlace" auto-complete="off" placeholder="请输入图片位置" disabled></el-input>
                            </el-form-item>
                                                                                
                            <el-form-item label="位置编号">
                                <el-input size="small" v-model="editForm.placeCode" auto-complete="off" placeholder="请输入位置编号" disabled></el-input>
                            </el-form-item>
                                                                                
                            <el-form-item label="图片链接">
                                <el-input size="small" v-model="editForm.imageUrl" auto-complete="off" placeholder="请输入图片链接" disabled></el-input>
                            </el-form-item>
                                                                                
                            <el-form-item label="创建时间">
                                <el-input size="small" v-model="editForm.createTime" auto-complete="off" placeholder="请输入创建时间" disabled></el-input>
                            </el-form-item>
                                                                                
                            <el-form-item label="修改时间">
                                <el-input size="small" v-model="editForm.updateTime" auto-complete="off" placeholder="请输入修改时间" disabled></el-input>
                            </el-form-item>
                                                                                
                            <el-form-item label="创建人">
                                <el-input size="small" v-model="editForm.createAdmin" auto-complete="off" placeholder="请输入创建人" disabled></el-input>
                            </el-form-item>
                                                                                
                            <el-form-item label="修改人">
                                <el-input size="small" v-model="editForm.updateAdmin" auto-complete="off" placeholder="请输入修改人" disabled></el-input>
                            </el-form-item>
                                                    
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="editFormVisible = false">取消</el-button>
                <el-button size="small" type="primary" :loading="loading" class="title" @click="changeInfor()">保存</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="addFormVisible" width="50%">
            <el-form label-width="200px" :model="addForm" ref="addForm">
                <el-row>
                    <el-col :span="18">
                                                                                                        
                            <el-form-item label="图片位置">
                                <el-input size="small" v-model="addForm.imagePlace" auto-complete="off" placeholder="请输入图片位置" ></el-input>
                            </el-form-item>
                                                                                
                            <el-form-item label="位置编号">
                                <el-input size="small" v-model="addForm.placeCode" auto-complete="off" placeholder="请输入位置编号" ></el-input>
                            </el-form-item>
                                                                                
                            <el-form-item label="图片链接">
                                <el-input size="small" v-model="addForm.imageUrl" auto-complete="off" placeholder="请输入图片链接" ></el-input>
                            </el-form-item>
                                                                                
                            <el-form-item label="创建时间">
                                <el-input size="small" v-model="addForm.createTime" auto-complete="off" placeholder="请输入创建时间" ></el-input>
                            </el-form-item>
                                                                                
                            <el-form-item label="修改时间">
                                <el-input size="small" v-model="addForm.updateTime" auto-complete="off" placeholder="请输入修改时间" ></el-input>
                            </el-form-item>
                                                                                
                            <el-form-item label="创建人">
                                <el-input size="small" v-model="addForm.createAdmin" auto-complete="off" placeholder="请输入创建人" ></el-input>
                            </el-form-item>
                                                                                
                            <el-form-item label="修改人">
                                <el-input size="small" v-model="addForm.updateAdmin" auto-complete="off" placeholder="请输入修改人" ></el-input>
                            </el-form-item>
                                                    
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="addFormVisible = false">取消</el-button>
                <el-button size="small" type="primary" :loading="loading" class="title" @click="addInfor()">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import axios from 'axios';
    export default {
        name: "displayBoard",
        data(){
            return{
                loading:true,
                editFormVisible:false,
                addFormVisible:false,
                editForm:{},//编辑弹窗数据
                totalnum:0,//总数据条数
                currentPage:1,//起始页
                pagesize:5,//每一页的数据条数
                currentRowId:"",
                addForm:{}, // 增加数据
                tableData:[{
                    id: "测试数据",
                    imagePlace: "测试数据",
                    placeCode: "测试数据",
                    imageUrl: "测试数据",
                    createTime: "测试数据",
                    updateTime: "测试数据",
                    createAdmin: "测试数据",
                    updateAdmin: "测试数据",
                                    }],
            }
        },
        methods:{
            openAddForm(){
                this.addForm = {}
                this.addFormVisible = true
            },
            addInfor(){
                let data = {}
                let addForm = this.addForm
                                                                                            // imagePlace
                    if(addForm.imagePlace===null || addForm.imagePlace==="" || !addForm.imagePlace){
                    }else{
                                                data.imagePlace = addForm.imagePlace
                    }
                                                                            // placeCode
                    if(addForm.placeCode===null || addForm.placeCode==="" || !addForm.placeCode){
                    }else{
                                                data.placeCode = addForm.placeCode
                    }
                                                                            // imageUrl
                    if(addForm.imageUrl===null || addForm.imageUrl==="" || !addForm.imageUrl){
                    }else{
                                                data.imageUrl = addForm.imageUrl
                    }
                                                                            // createTime
                    if(addForm.createTime===null || addForm.createTime==="" || !addForm.createTime){
                    }else{
                                                data.createTime = addForm.createTime
                    }
                                                                            // updateTime
                    if(addForm.updateTime===null || addForm.updateTime==="" || !addForm.updateTime){
                    }else{
                                                data.updateTime = addForm.updateTime
                    }
                                                                            // createAdmin
                    if(addForm.createAdmin===null || addForm.createAdmin==="" || !addForm.createAdmin){
                    }else{
                                                data.createAdmin = addForm.createAdmin
                    }
                                                                            // updateAdmin
                    if(addForm.updateAdmin===null || addForm.updateAdmin==="" || !addForm.updateAdmin){
                    }else{
                                                data.updateAdmin = addForm.updateAdmin
                    }
                                    
                axios.post(this.baseurl+'/displayboard/saveT', data
                ).then(res => {
                    if (res.data === "saveSuccess") {
                        this.$alert('添加成功', '', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.loadData()
                                this.addFormVisible = false
                            }
                        })
                    }else{
                        this.$message.error('添加失败，请联系管理员');
                    }
                }).catch(err=>{
                    this.$message.error('添加失败，请联系管理员');
                })
            },
            // 删除操作
            handleDelete(index, row) {
                let data = {
                    id: row.id
                }
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    axios.post(this.baseurl+'/displayboard/delete',data
                    ).then(res => {
                        if(res.data === "delSuccess" ){
                            this.$message.success('删除成功');
                            this.tableData.splice(index, 1);
                        }
                    })
                }).catch(err=>{
                    this.$message({
                        showClose: true,
                        message: '删除失败，请联系后台管理员',
                        type: 'error'
                    });
                })
            },
            // 编辑操作
            handleEdit: function(index, row) {
                this.editFormVisible = true
                this.editForm = row
            },
            // 页面变化
            handleSizeChange:function(pagesize){
                this.pagesize=pagesize;
                this.loadOnePage(this.currentPage,this.pagesize)
            },
            // 监听页数变化
            handleCurrentChange(val){
                this.currentPage=val;
                this.loadData()
            },
            //加载表格数据
            async loadData(){

                // 测试假数据
                // this.totalnum = this.tableData.length
                // this.loading = false

                // 接口数据库数据
                this.loadOnePage(this.currentPage,this.pagesize)
            },
            //加载单页数据函数方法
            loadOnePage(page,page_size){
                this.tableData=[]
                this.loading = true
                axios.get(this.baseurl+'/displayboard/pageByPramas?page=' + page + '&limit=' + page_size, { //101.37.174.73:8901
                }).then(res => {
                    this.totalnum=res.data.total;
                    let i = this.currentPage-1
                    for(let j=0;j<i*this.pagesize;j++){
                        this.tableData.push("");
                    }
                    for (let m=0; m < this.pagesize; m++) {
                        if(!res.data.list[m]){
                            break
                        }
                        this.tableData.push(res.data.list[m]);
                    }
                    this.$nextTick(() => {
                        this.loading = false
                    })
                }).catch((err) => {
                    this.$message({
                        showClose: true,
                        message: '无法加载数据，请联系后台管理员',
                        type: 'error'
                    });
                    this.loading = false
                })
            },
            // 修改信息按钮
            changeInfor(){
                // let params =new URLSearchParams()
                let data = {}
                let editForm = this.editForm
                                    // id
                    if(editForm.id===null || editForm.id==="" || !editForm.id){
                    }else{
                         params.append("id",editForm.id);
                                            }
                                    // imagePlace
                    if(editForm.imagePlace===null || editForm.imagePlace==="" || !editForm.imagePlace){
                    }else{
                         params.append("imagePlace",editForm.imagePlace);
                                            }
                                    // placeCode
                    if(editForm.placeCode===null || editForm.placeCode==="" || !editForm.placeCode){
                    }else{
                         params.append("placeCode",editForm.placeCode);
                                            }
                                    // imageUrl
                    if(editForm.imageUrl===null || editForm.imageUrl==="" || !editForm.imageUrl){
                    }else{
                         params.append("imageUrl",editForm.imageUrl);
                                            }
                                    // createTime
                    if(editForm.createTime===null || editForm.createTime==="" || !editForm.createTime){
                    }else{
                         params.append("createTime",editForm.createTime);
                                            }
                                    // updateTime
                    if(editForm.updateTime===null || editForm.updateTime==="" || !editForm.updateTime){
                    }else{
                         params.append("updateTime",editForm.updateTime);
                                            }
                                    // createAdmin
                    if(editForm.createAdmin===null || editForm.createAdmin==="" || !editForm.createAdmin){
                    }else{
                         params.append("createAdmin",editForm.createAdmin);
                                            }
                                    // updateAdmin
                    if(editForm.updateAdmin===null || editForm.updateAdmin==="" || !editForm.updateAdmin){
                    }else{
                         params.append("updateAdmin",editForm.updateAdmin);
                                            }
                                axios.post(this.baseurl+'/displayboard/updT', data
                ).then(res => {
                    if (res.data === "updSuccess") {
                        this.$alert('修改成功', '', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.loadData()
                                // this.editFormVisible = false
                            }
                        })
                    }else{
                        this.$message.error('修改失败，请联系管理员');
                    }
                }).catch(err=>{
                    this.$message.error('修改失败，请联系管理员');
                })


            },
            // 根据需求自行填写
            cellStyle ({ row, column, rowIndex, columnIndex }) {
                // if (columnIndex === 0) {
                //     return 'color: rgb(64,158,255);font-weight: bold;'
                // }
            },

            // 改变行背景色
            changeCurrentRow(row, column, event) {
                // row.id字段可以是数据列表中的任意唯一字段
                if (this.currentRowId === row.id) return
                this.currentRowId = row.id
                // do something
            },
            rowStyle ({row, rowIndex}) {
                if (this.currentRowId === row.id) {
                    // 此处返回选中行的样式对象，按需设置
                    return {
                        'background-color': '#e3f0fb',
                    }
                }
            },
        },
        mounted(){
            this.loadData()
        }
    }
</script>

<style scoped>
    .main-box{
        width: 100%;
        display: flex;
        justify-content: center;
        height: auto;
        /*align-items: center;*/
        flex-direction: row;
        flex-wrap: wrap;
    }
    .some-button{
        width: 90%;
        transform: translateX(-50px);
        margin-top: 20px;
    }
    .table-box{
        width: 90%;
        padding: 35px 50px 35px 50px;
        margin-top: 20px;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02);
        background: white;
        color: rgba(116, 121, 140, 1);
        border-radius: 5px;
    }
    .el-table{
        color: rgba(116, 121, 140, 1);
        font-size: 15px;
    }
    .el-dialog{
        border-radius: 10px;
    }
    .pagination{
        margin-top: 30px;
    }
</style>